Soooo after some (serious) procrastination I have finally been struck with a flash of inspiration and decided to get down to working on one of my pets' profiles before I make excuses to procrastinate again and forget everything I plan to do XD.

Pet profile here

Please skip the lore part if you want. That is super long and mostly just for me to store my story ideas. Also English is not my first language so I know many parts of it will probably sound very awkward to you.

I'd love some critique and suggestions to improve layout/ effect/ TC/ browser compatibility if possible please and thank you ^^

Wow, that's really great work for your first profile! I love the simplistic design! The smaller ornament (for minion and stuff) is a bit too blurry in the straight line. It would look better if the line was just 1 pixel in height instead of 2. But the idea of using them for hovers is great! The bigger ornament seems a tiny bit blurry, too, but it's not obvious^^

I really love the fonts you used, they work really well with this simplistic layout! For the part wit the battles I think it would look better if the images were at a lower opacity and if you just put the images ther without the image code because the things that pop out on hover a kind of distracting.

The image of the pet on the right looks a tiny bit cut off in the grassy area. A fade to white there would make it look even better!

The invisible scrollbar doesn't work in firefox btw^^

(I hope those many points I mentioned don't come of as mean because the layout is already really amazing and I'm just nitpicking!)

i love it, it's very beautiful and unique! i agree with the points has made regarding the item images in the battle section, as well as improving the transition to white around the edges of the pet image.

Beautiful! Just as an aside, I have firefox ESR and the scrollbar works just fine. :)

Thank you guys for the feedback, and @ Athene no, yours don't come across as mean at all :D I really appreciate your time and help.

I'll definitely edit the pet image at the weekend (or maybe next weekend) when I've got more free time. Ideally I want to redo it completely but that will have to wait a long while. I've tried to fix the item hover thingy in the battle section too. The opacity does improve the look a lot :O but I seem to have a couple problems with the direct image link: [-] When I replaced the item code with the img code, the image showed up really small and somehow it pushed the next cell containing texts down a couple of lines, while I want it to be in line with texts. I tried float:left for the table row but it doesn't seem to work. [-] Then I tried to manipulate the item-hover:hover selector to remove the popup. Still this trick doesn't work as it makes the image flash on hover and the text part jerk terribly. Here's what I'm talking about I must have done something wrong somewhere. Could any of you send some help please?

Here's the table codes I used for the battle part:

/CSS/ .div-table2 {display: table; width: auto; border: 0px solid; } .div-table-row2 {display: table-row; width: 250px; } .div-table-cell2 {display: table-cell; width: auto; height: auto; text-align: left; } .div-table-cell2 img {opacity: 0.8; }

/HTML/

The First Battle

text text text

To remove hover I added this code to the CSS: .item-hover:hover, .wl_item {display: none;}

Any help is appreciated. If you're busy or if this question is more relevant in the main Creative corner I'll repost my question there :D @ Frenchi

well i was going to suggest under .div-table-cell2 img adding something to define the image dimensions, like: .div-table-cell2 img {height:64px!important; width:64px!important; opacity: 0.8}but i tested that on the other profile you linked where you're fiddling with things and for some reason all the other images look fine except for the first one (heroic wind staff), which will scale vertically, but the width seems very messed up somehow - the width never seems to match the actual width given, always some amount less than whatever i enter. no clue what's going on there. ultimately i would say it's not a huge deal and if you can't figure it out i think it's fine if you just leave them using the item code.

I just tried using float:left (adding it to .div-table-row2 img) and removing the cell divs in the part that you posted and it seeme to work for me.

: Oh thank you so much guys. Switching to float indeed works like a charm. I created two float div classes, though, because I remembered half way that I've got two images for the last table :D

Now there's only the pet image to fix. I've got to sleep on it for a while, but thank you so much for the feedback. They help a lot :D

I guess I cannot do anything about the scrollbar in FF though :( I've taken a quick look online and it seems that for FF the only way to hide scrollbar is to add a negative margin to the text boxes. I'm just not sure if it would interfere with how the tabs look in Chrome and IE. I'll try it out this weekend. In the meantime I hope the scroll bar in FF isn't too distracting, no?

For the pet image something like this would already work perfectly fine c:

And for the scrollbar you could either put it all inside another slightly smaller div to hide the scrollbar or you could cover the scrollbar like I usually do (example)^^

: Wow thanks so much for helping me with the pet image :D I'm thinking about redoing it so that it matches the flower at the top left corner, that's why I'm planning on procrastinating (again XD). The scrollbar'll have to wait until Friday, I guess. I've got access to FF on my work computer but not on my laptop at home. My lap is jam packed now so I really don't want to install another browser XD, but thanks for showing me your pet profile as an example :D

P.S. Your pet name is Deya! That's interesting because the main character in my fantasy world to which this pet (Nanielle) belongs is named Deya too. I'm waiting to be struck by inspiration again for Deianira's profile (who I intend to make her into my character Deya XD).

It would be nice if the pet image matched the one of the flowers but I think it already works well like it is now. And I personally really like the style of the pet image! Well the scrollbar has the same width in both chrome and firefox, so if you remove the part that removes the scrollbar for chrome then it shoudln't be a problem to cover it^^

Wow, that's a huge coincidence! I don't even remember how I made her name up just that I used it for my character in Dragon Age!